<template>
  <div id="container">
    <div style="width: 360px;height: 100%;display: flex;flex-wrap: wrap;gap: 20px;
      align-items: center;">
      <div class="container">
        <div>
          <div class="category">
            <slot name="category">满箱</slot>
          </div>
          <div class="num">
            <slot name="num">999999</slot>
          </div>
        </div>
      </div>
      <div class="container">
        <div>
          <div class="category">
            <slot name="category">重车</slot>
          </div>
          <div class="num">
            <slot name="num">999999</slot>
          </div>
        </div>
      </div>
      <div class="container">
        <div>
          <div class="category">
            <slot name="category">空车</slot>
          </div>
          <div class="num">
            <slot name="num">999999</slot>
          </div>
        </div>
      </div>
      <div class="container">
        <div>
          <div class="category">
            <slot name="category">已出场</slot>
          </div>
          <div class="num">
            <slot name="num">999999</slot>
          </div>
        </div>
      </div>
      <div class="container">
        <div>
          <div class="category">
            <slot name="category">待回收</slot>
          </div>
          <div class="num">
            <slot name="num">999999</slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, reactive, ref } from "vue";
import category from '../centerContainer/category.vue';
// Chart instance and refs
let chartInstance = <any>null;
let chart = ref<any>(null);
let fontColorX = <string>'#6E7079';
let y: string[] = reactive<string[]>([]);
let label: string[] = reactive<string[]>([]);

// Categories for the bottom
let categories = ['满箱', '重车', '空车', '已出场', '待回收']; // Define these categories

// Mock data for testing
let initCharts = function () {
  // Fake data for chart
  let data1 = [120, 160, 90, 180, 130];  // Mock values for main bars
  let topData = [130, 170, 100, 190, 140];  // Top decoration data
  let bottomData = [100, 140, 80, 160, 110];  // Bottom decoration data
  let height = chart.value.clientHeight;
  let width = chart.value.clientWidth;

  const option = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
      trigger: 'axis',
      formatter: function (params: string) {
        let str = params[0].axisValue;
        return str;
      },
    },
    grid: {
      top: 40,
      bottom: 0,
      left: 40,
      right: 40,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: categories, // Use the categories array for the x-axis
      axisLine: {
        lineStyle: {
          color: fontColorX,
        },
        onZero: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: '#00000000', // Set axis labels color to transparent
          fontSize: 14, // Change axis labels font size
          fontFamily: 'MicrosoftYaHei',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontSize: 12,
          fontFamily: 'MicrosoftYaHei',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#657CA8',
        },
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          width: 1,
        },
      },
    },
    series: [
      // Bottom data (with diamond shapes)
      {
        name: '',
        type: 'pictorialBar',
        symbolOffset: ['0%', '50%'],
        symbolSize: [20, 10],
        z: 12,
        symbol: 'diamond',
        itemStyle: {
          opacity: 1,
          color: '#1B1B1C',
        },
        data: bottomData,
      },
      // Main bars (bars with gradient color)
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0398CEFB' },
            { offset: 0.5, color: '#9299A25B' },
            { offset: 1, color: '#1B1B1C' },
          ]),
        },
        data: data1,
      },
      // Transparent bar behind the main bars
      {
        type: 'bar',
        symbol: 'diamond',
        barWidth: 22,
        itemStyle: {
          color: 'transparent',
        },
        data: data1,
      },
      // Top data (with diamond shapes)
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolOffset: ['0%', '-50%'],
        symbolSize: [20, 10],
        z: 12,
        itemStyle: {
          normal: {
            opacity: 1,
            color: '#FFFFFF',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#FFFFFF',
                fontSize: 12,
                top: 10,
              },
            },
          },
        },
        symbolPosition: 'end',
        data: data1,
      },
      // Shadow data at the top of the bars
      {
        name: '',
        type: 'pictorialBar',
        symbol: 'diamond',
        symbolOffset: ['0%', '-50%'],
        symbolSize: [20, 10],
        z: 12,
        symbolPosition: 'end',
        itemStyle: {
          color: 'rgba(18, 47, 133,0.5)',
          opacity: 0.3,
          borderWidth: 1,
          borderColor: 'rgba(18, 47, 133,1)',
        },
        data: topData,
      },
      // Background color bars
      {
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        z: 0,
        itemStyle: {
          color: 'rgba(18, 47, 133,0.3)',
        },
        data: topData,
      },
    ],
  };

  // Resize chart to fit container dimensions
  chartInstance.resize({
    width,
    height,
  });
  chartInstance.setOption(option);
};

// Function to handle resizing
const resizeChart = () => {
  const chartInstance = echarts.init(chart.value);
  chartInstance.clear();
  window.addEventListener(
    "resize",
    () => {
      chartInstance.resize();
    },
    false
  );
};

// Initialize chart with mock data when component is mounted
// onMounted(() => {
//   chartInstance = echarts.init(chart.value);
//   // Call initCharts to use the mock data for chart rendering
//   initCharts();
// });

defineExpose({ resizeChart });

</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;

  .chart-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
  }
}

.chart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.container {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  height: 60px;
  box-shadow: 0px 0px 20px #b8a09b inset;

  .img {
    height: 80%;
    overflow: hidden;
    display: flex;
    justify-content: center;

    img {
      height: 100%;
      border-radius: 20%;
      padding: 8px;
    }
  }

  div {
    width: 100px;
    text-align: center;

    .category {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 3px;
    }

    .num {
      font-size: 14px;
    }
  }
}
</style>
